<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
    width: 400px;
}
</style>
</head>
<body>
    
<div class="box" id="abc" title="title标题" hehe="呵呵">box标签</div>
<a href="https://www.baidu.com/">百度</a>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F5476e32631957.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670548272&t=c6bf0225c8affb29469ef5b8a3fc7e45" alt="向日葵">
<input type="text" value="请输入账号" name="user">

<div class="box1" data-a="数据1">box1</div>
<div class="box2" data-b="数据2">box2</div>

<script>
// 获取元素
var div = document.querySelector('div');
var a = document.querySelector('a');
var img = document.querySelector('img');
var ipt = document.querySelector('input');

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');

// 元素节点的属性操作：
// 1.节点对象的属性
// console.dir( div );

// 获取属性值：直接访问属性名
// console.log( div.className );// 'box'
// console.log( div.id );// 'abc'
// console.log( div.title );// 'title标题'
// console.log( a.href );// 'https://www.baidu.com/'
// console.log( img.src );// 'xxxxxxxxxx'
// console.log( img.alt );// '向日葵'
// console.log( ipt.type );// 'text'
// console.log( ipt.value );// '请输入账号'
// console.log( ipt.name );// 'user'

// 修改属性值：直接赋值
// div.title = '新的title值';
// div.id = 'www';
// img.alt = '一朵花';
// ipt.type = 'password';


// 2.标签上的属性
console.log( div.hehe );// undefined 标签上的自定义属性不包含在节点对象中

// 获取标签上的属性值：
console.log( div.getAttribute('hehe') );// '呵呵'
console.log( div.getAttribute('class') );// 'box'
console.log( img.getAttribute('alt') );// '向日葵'

// 设置标签上的属性值：
div.setAttribute('id','www');
div.setAttribute('hehe','哈哈');
img.setAttribute('alt','一朵花');

// 删除标签上的属性节点：
div.removeAttribute('title');
img.removeAttribute('alt');

// 获取属性节点：
var attr = div.getAttributeNode('hehe');
console.log( attr );// hehe="呵呵"
console.log( typeof attr );// 'object'

// 通过dataset属性获取data-的属性值：
console.log( box1.dataset.a );// '数据1'
console.log( box2.dataset.b );// '数据2'

</script>
</body>
</html>